<template>
  <div class="slRoles" v-loading="loading" element-loading-text="加载中...">
    <div class="login-title">
      <p class="title" v-if="showNew == 1">登录成功 · 售后服务管理商家端</p>
      <p class="title" v-else>创建成功 · 售后服务管理商家端</p>
    </div>
    <div class="tabs">
      <div class="tab" style="color: #007cff;"> 账号：{{ userStore.account }}</div>
      <div class="navigation" v-if="showNew == 1">
        <div @click="goLogin"> 返回登录 </div>
      </div>
      <div class="navigation" v-if="showNew == 2">
        <div @click="showNew = 1"> 选择商家 </div>
      </div>
      <div class="navigation" v-if="showNew == 3">
        <div @click="showNew = 1"> 选择商家 </div>
      </div>
    </div>
    <div class="list_card">
      <div v-if="showNew == 1">
        <div class="card">
          <div class="card_li" v-for="item in userStore.role" @click="goHome(item.code, item.status, item.empStatus)">
            <div class="c_r">
              <div class="right_">
                <div class="role">{{ item.role }}</div>
                <div class="name">{{ item.name }}&nbsp; - &nbsp;{{ item.custName }} </div>
              </div>
              <div class="left tab_1" v-if="item.status == 1">待审核</div>
              <div class="left tab_3" v-if="item.status == 2 && item.empStatus">禁用</div>
              <div class="left tab_2" v-else-if="item.status == 2">使用中</div>
              <div class="left tab_3" v-if="item.status == 3">已冻结</div>
              <div class="left tab_3" v-if="item.status == 4">已过期</div>
            </div>
            <div class="c_l"> 进入 </div>
          </div>
        </div>
      </div>
      <el-form v-if="showNew == 2" ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0">
        <el-form-item prop="username" class="el-item" label=" ">
          <el-input placeholder="负责人名称" type="text" autoComplete="on" v-model="ruleForm.username" clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="phone" class="el-item" label=" ">
          <el-input placeholder="手机号" maxlength="11" type="tel" autoComplete="on" v-model="ruleForm.phone" clearable>
          </el-input>
        </el-form-item>
        <el-form-item prop="name" class="el-item" label=" ">
          <el-input placeholder="商家名称" type="text" autoComplete="on" v-model="ruleForm.name" clearable>
          </el-input>
        </el-form-item>

        <el-form-item prop="telephone" class="el-item" label=" ">
          <el-input placeholder="商家电话" type="tel" autoComplete="on" v-model="ruleForm.telephone" clearable>
          </el-input>
        </el-form-item>
        <el-form-item class="el-item" label=" ">
          <SingleAddress ref="selectAddr" class="select-addr" />
        </el-form-item>
        <el-form-item class="el-item" label=" ">
          <el-input placeholder="详细地址" maxlength="200" type="text" autoComplete="on" v-model="ruleForm.address" clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="success" v-if="showNew == 3">
        <el-icon color="#fd7400" size="90">
          <SuccessFilled />
        </el-icon>
        <div class="success_text"> 恭喜 商家创建成功 </div>
        <div class="tip"> 你的资料已提交审核，请等待审核通知！ </div>
      </div>
      <el-button v-if="showNew == 1" class="login-btn" type="primary" color="#007cff"
        @click="showNew = 2">注册商家</el-button>
      <el-button v-if="showNew == 2" class="login-btn" type="primary" color="#007cff"
        @click="submitForm(ruleFormRef)">注册商家</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification, ElMessage, FormInstance, FormRules } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import SingleAddress from '../../../components/address/singleAddress.vue'
import { useUserStore } from '../../../store/modules/user'
import { registerCustomer, getCustomerCode, getCustomer } from '../../../api/user'
import { getTimeState } from '../../../utils/index'
import { Getdrsss, phone } from '../../../utils/validate'
import { closeWebSocket } from '../../../utils/socket';

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const showNew = ref(1)

onMounted(() => {
  ruleForm.username = userStore.userInfo.name
  ruleForm.phone = userStore.userInfo.phone
  // 获取厂商
  loading.value = true
  getCustomer().then((res2) => {
    if (res2.data.success) {
      userStore.account = res2.data.data.rows.phone
      userStore.role = res2.data.data.rows.accountRoleVos
      ruleForm.username = res2.data.data.rows.username
      ruleForm.phone = res2.data.data.rows.phone
    } else {
      ElMessage({
        showClose: true,
        message: res2.data.message,
        type: 'error',
        duration: 3000,
      })
    }
    loading.value = false
  })
})

// 表单数据
const ruleForm = reactive({
  address: '',
  area: '',
  city: '',
  name: '',
  phone: '',
  province: '',
  telephone: '',
  town: '',
  cascaderA: null,
  username: '',
})

const rules = reactive<FormRules>({
  username: [{ required: true, message: '请填写负责人名称', trigger: ['blur', 'change'] }],
  name: [{ required: true, message: '请输入商家名称', trigger: ['blur', 'change'] }],
  phone: [
    { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
    { validator: phone(ruleForm.phone), trigger: ['blur', 'change'] },
  ],
  telephone: [
    { required: false, message: '请填商家电话', trigger: ['blur', 'change'] },
    { pattern: /^\d{3,4}-?\d{7,8}$|^1[3,4,5,6,7,8,9]\d{9}$/, message: '电话号码格式不正确', trigger: ['blur', 'change'] },
  ],
})

const selectAddr = ref()

// 回到登录
const goLogin = () => {
  router.push({ path: '/login/index' })
}
// 注册商家
const submitForm = async (formEl: FormInstance | undefined) => {
  const addr = selectAddr.value.getSelectAddr()
  ruleForm.cascaderA = addr.province
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const data = {
        name: ruleForm.name,
        username: ruleForm.username,
        phone: ruleForm.phone,
        telephone: ruleForm.telephone,
        province: addr.province,
        city: addr.city,
        area: addr.area,
        town: addr.town,
        address: ruleForm.address,
        custCode: route.query.custCode || 'nnXCuneQ8PV7E50b8DLYisrgLRLE0kEU6vRjiyYDQMvZyYXQs9QeRMJT3Fv9'//平台编码
      }
      loading.value = true
      registerCustomer(data).then((res) => {
        loading.value = false
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: res.data.success ? 'success' : 'error',
          duration: 4000,
        })
        if (res.data.success) {
          getCustomer().then((res2) => {
            if (res2.data.success) {
              userStore.role = res2.data.data.rows.accountRoleVos
              showNew.value = 3
            }
          })
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 进入系统
const goHome = (val, status, isUse) => {
  switch (status) {
    case 1:
      ElMessage({
        message: '该商家处于待审核状态，请耐心等待！',
        type: 'warning',
        duration: 2000,
      })
      break
    case 2:
      if (isUse) {
        ElMessage({
          message:'当前人员已禁用!',
          type: 'warning',
          duration: 2000,
        })
        return
      }
      loading.value = true
      let data = { code: val }
      getCustomerCode(data).then((res) => {
        if (res.data.success) {
          userStore.token = userStore.row.tokenValue
          userStore.getInfo()
          router.push({
            path: '/new',
          })
          ElNotification({
            title: getTimeState(),
            message: '欢迎登录 售后服务系统',
            type: 'success',
            duration: 1000,
          })
        } else {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 5000,
          })
        }
        loading.value = false
      })
      break
    case 3:
      ElMessage({
        message: '该商家已冻结，请注册或切换商家！',
        type: 'warning',
        duration: 2000,
      })
      break
    case 4:
      ElMessage({
        message: '该商家已过期，请注册或切换商家！',
        type: 'warning',
        duration: 2000,
      })
      break
  }
}
</script>

<style lang="scss" scoped>
@import '../index.scss';

.slRoles {
  :deep(.el-form-item__label) {
    justify-content: space-between !important;
  }

  :deep(.el-cascader) {
    width: 100%;

    &:hover {
      border: none;
    }
  }

  .success {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin-top: 40px;
    height: 400px;

    .success_text {
      color: #fd7400;
      font-size: 14px;
      margin: 20px;
    }

    .tip {
      color: #999;
      font-size: 14px;
    }

    .login-btn {
      margin: 20px 0;
    }
  }

  .navigation {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 14px;
    padding: 0 12px;
    cursor: pointer;

    &:hover {
      color: #007cff;
    }
  }

  .list_card {

    .title_card {
      color: #000;
      font-weight: 600;
      font-size: 14px;
    }

    .card {
      width: 100%;
      max-height: 50vh;
      overflow-y: auto;

      .card_li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 2px solid #f0ebeb;
        border-right: 2px solid transparent;
        box-shadow: 0px 2px 5px #ebe9e997;
        margin: 10px 0;
        height: 70px;
        cursor: pointer;

        &:hover {
          border: 2px solid #007cff;

        }

        .c_r {
          display: flex;
          align-items: center;
          flex: 1;
          padding: 0 10px;

          .right_ {
            flex: 1;
            text-align: left;

            .role {
              font-weight: 600;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 200px;
              font-size: 16px;
            }

            .name {
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 200px;
              margin-top: 10px;
              color: #999;
              font-size: 14px;
            }
          }

          .left {
            color: #ffffff;
            padding: 2px 4px;
            font-size: 12px;
          }

          .tab_1 {
            background-color: #fd9001;
          }

          .tab_2 {
            background-color: #26b9ad;
          }

          .tab_3 {
            background-color: #ccc;
          }
        }

        .c_l {
          width: 72px;
          height: 72px;
          line-height: 60px;
          text-align: center;
          background-color: #007cff;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
        }
      }
    }

    .login-btn {
      margin-top: 40px;
    }
  }

  .created {
    display: flex;
    align-items: center;
    margin: 30px 20px;

    .creat_text {
      font-size: 16px;
    }
  }
}

:deep(.el-cascader) {
  background-color: transparent;

  &:not(.is-disabled):hover .el-input__wrapper {
    box-shadow: 0 0 0 1px transparent;
  }

  .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px transparent;
    border-bottom: 1px solid #007cff !important;
  }
}

.select-addr {
  width: 100%;
}
</style>
